<template>
	<view class="">
		<view class="device_list">
			<view class="device_list_box" v-for="(item,index) in devicelist" :key="index" @click="devicedetails(item.id)">
				<view class="device_img">
					<image :src="item.img" mode="widthFix"></image>
				</view>
				<view class="device_list_text">
					<view class="device_title_com">
						{{item.title}}
					</view>
					<view class="u-flex u-row-between awe">
						<view class="">
							<view class="device_text_com">
								<u-icon name="map" color="#c40200" size="28" class="device_ico_text"></u-icon>{{item.sbqy}}
							</view>
							<view class="device_text_com">
								<u-icon name="car" color="#c40200" size="28" class="device_ico_text"></u-icon> {{item.brandname}}
							</view>
						</view>
						<view class="device_details_ico">
							<u-icon name="phone" size="38" color="#fff"></u-icon>
						</view>
					</view>
					<view class="service-db" @click.stop="GoContrast(item.id)">
						<u-icon name="plus" color="#c40200" size="24" style="margin-right: 5rpx;"></u-icon> 对比
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view class="device_list" v-if="devicelist.length<=0">
			<view class="device_zwsj">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			devicelist: {
				type: Array,
				default () {
					return []
				}
			},
		},
		methods: {
			devicedetails(id) {
				this.$u.route('/pages/HomeLnner/DeviceDetails/DeviceDetails', {
					id: id
				});
			},
			async GoContrast(keyid) {
				if(this.$store.state.token){
					let params = {
						cmd: 'nDeviceCart_add_proc',
						ak: this.$store.state.token,
						para: {
							sbid: keyid
						},
					}
					const res = await this.$u.api.device(params)
					this.$refs.uToast.show({
						title: res.Message,
					})
					this.ContrastList()
				}else{
						this.$u.route('/pages/myuser/user/UserInfo')
				}
				
			},
			async ContrastList() {
				let params = {
					cmd: 'nDeviceCart_list_proc',
					ak: this.$store.state.token,
					para: {
			
					},
				}
				const res = await this.$u.api.device(params)
				if(res.Data.Data.length==2){
					this.$u.route('/pages/HomeLnner/DeviceContrast/DeviceContrast');
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.device_nav {
		padding: 20rpx 0;
		display: flex;
		border-bottom: 2rpx solid #e5e5e5;

		.device_com {
			font-size: 26rpx;
			flex: 1;
			text-align: center;
			border-right: 2rpx solid #e5e5e5;

			.device_ico {
				margin-left: 10rpx;
			}
		}
	}

	.device_list {
		.device_zwsj {
			padding: 30px;
			text-align: center;
			color: #c3c3c3;
		}
	}

	.device_list_box {
		padding: 35rpx 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #e5e5e5;

		.device_img {
			width: 162rpx;
			height: 150rpx;
			overflow: hidden;
			border-radius: 5rpx;
			margin-right: 40rpx;

			image {
				width: 162rpx;
				background: #F2F2F2;
			}
		}

		.device_list_text {
			flex: 1;
			position: relative;

			.device_title_com {
				width: 70%;
				margin-bottom: 20rpx;
				color: #333333;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.service-db {
				position: absolute;
				right: 0;
				top: 0;
				border: 2rpx solid #c40200;
				border-radius: 10rpx;
				color: #c40200;
				padding: 5rpx 10rpx;
				height: 45rpx;
				font-size: 24rpx;
			}

			.awe {
				width: 100%;

				.device_details_ico {
					width: 66rpx;
					height: 66rpx;
					background: #C30D23;
					box-shadow: 0px 2rpx 10px 0px rgba(195, 13, 35, 0.39);
					border-radius: 50%;
					margin-right: 30rpx;
					text-align: center;
					line-height: 70rpx;
				}

			}

			.device_text_com {
				margin-bottom: 10rpx;
				color: #666;
				font-size: 20rpx;
			}

			.device_ico_text {
				margin-right: 10rpx;
			}
		}


	}
</style>
